<template>
  <div class="login">
    <img src="@/assets/images/login/logo.png" alt="" />
    <div class="login_bock">
      <el-form v-if="!store.state.login.isUserLogin"
          ref="ruleMobileFormRef"
          :model="ruleMobileForm"
          :rules="rulesMobile"
          label-width="0px"
          class="demo-ruleForm"
          :size="formSize"
      >
        <el-form-item prop="tel">
          <el-input
              v-model="ruleMobileForm.tel"
              :prefix-icon="User"
              placeholder="请输入手机号"
              size="large"
              autocomplete="new-password"
          />
        </el-form-item>
        <el-form-item prop="codeMobile">
          <div class="login_code">
            <el-input v-model="ruleMobileForm.codeMobile" placeholder="请输入手机验证码" size="large" />

            <el-button class="login_mobile_code"
                type="primary"
                size="large"
                style="width: 100%"
                @click="getCodeMobile()"
            >
              获取验证码
            </el-button>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              size="large"
              style="width: 100%"
              @click="submitMobileForm(ruleMobileFormRef)"
          >
            手机号验证
          </el-button>
        </el-form-item>
      </el-form>
      <el-form  v-if="store.state.login.isUserLogin"
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="0px"
        class="demo-ruleForm"
        :size="formSize"
      >
        <el-form-item prop="username">
          <el-input
            v-model="ruleForm.username"
            :prefix-icon="User"
            placeholder="请输入用户名"
            size="large"
            autocomplete="new-password"
          />
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            v-model="ruleForm.pass"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
            size="large"
            autocomplete="new-password"
          />
        </el-form-item>
        <el-form-item prop="code">
          <div class="login_code">
            <el-input v-model="ruleForm.code" placeholder="请输入验证码" size="large" />
            <img
              @click="getLocalTime"
              :src="`https://bi.myelc.cn/api/V1/users/captcha?_t=${captchaTime}`"
              alt=""
            />
          </div>
        </el-form-item>
        <el-form-item prop="type">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox label="记住密码" name="type" />
          </el-checkbox-group>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="large"
            style="width: 100%"
            @click="submitForm(ruleFormRef)"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref,watch, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Lock, User } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
const store = useStore()

interface RuleMobileForm {
  tel: string
  codeMobile: string
}

const ruleMobileFormRef = ref<FormInstance>()
const ruleMobileForm = reactive<RuleMobileForm>({
  tel: '',
  codeMobile: ''
})

const rulesMobile = reactive<FormRules<RuleMobileForm>>({
  tel: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
  codeMobile: [{ required: true, trigger: "change", message: "请输入手机验证码" }]
})

function getCodeMobile() {
  if(ruleMobileForm.tel.length==11){
      store.dispatch('login/getCodeMobile', {"tel":ruleMobileForm.tel})
  }
}
const submitMobileForm = async (formEl: FormInstance | undefined) => {

  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      store.dispatch('login/mobileAuthCode', ruleMobileForm)
    }
  })
}

watch(() => store.state.login.loginUsername, () => {
  ruleForm.username = store.state.login.loginUsername;
})

interface RuleForm {
  username: string
  pass: string
  code: string
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  username: '',
  pass: '',
  code: ''
})

const rules = reactive<FormRules<RuleForm>>({
  username: [{ required: true, message: '请输入用户名！', trigger: 'change' }],
  pass: [
    {
      required: true,
      message: '请输入密码！',
      trigger: 'change'
    }
  ],
  code: [
    {
      required: true,
      message: '请输入验证码！',
      trigger: 'change'
    }
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      store.dispatch('login/usersLogin', ruleForm)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`
}))

const captchaTime = ref(0)
const getLocalTime = () => {
  captchaTime.value = Date.now()
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
:deep(.el-input__inner),
:deep(.el-button--large) {
  height: 70px;
}
:deep(.el-input .el-input__icon) {
  font-size: 24px;
}
:deep(.el-checkbox) {
  height: 25px;
}
:deep(.el-checkbox__label),
:deep(.el-input__inner),
:deep(.el-form-item__error) {
  font-size: 18px;
}
:deep(.el-button--large) {
  font-size: 27px;
}
:deep(.el-form-item--default) {
  margin-bottom: 30px;
}
:deep(.el-checkbox__inner) {
  width: 20px;
  height: 20px;
}
:deep(.el-checkbox__inner::after) {
  // width: 20px;
  height: 15px;
  left: 6px;
}

.login_code {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  img {
    height: 68px;
    margin-left: 25px;
  }
}
.login_mobile_code {
  height: 68px;
  margin-left: 25px;
}
.login {
  height: 100vh;
  background: url('@/assets/images/login/login_bj.png') no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & > img {
    width: 1021px;
    margin-bottom: 53px;
  }

  .login_bock {
    height: 568px;
    width: 704px;
    text-align: center;
    background: url('@/assets/images/login/login_bock.png') no-repeat;
    background-size: 100% 100%;
    padding: 63px 110px;
  }
}
</style>